import commonStyles from '@/assets/common.less';
import ArticleItem from '@/components/ArticleItem';
import { findArticleListByTitleEs } from '@/services/articles';
import useRequest from '@ahooksjs/use-request';
import { useSearchParams } from '@umijs/max';
import { message, Radio, Skeleton, Tabs, Tag } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.less';

type Props = {};
const Index: React.FC<Props> = () => {
  const [search] = useSearchParams();
  const searchStrM = search.get('searchStrM');
  const [articleList, setArticleList] = useState<any>([]);
  const { run: findArticleListByTitleEsRun, loading: searchLoading } = useRequest(
    findArticleListByTitleEs,
    {
      debounceInterval: 300,
      manual: true,
      onSuccess: (res) => {
        const { code, data: { records = [] } = {}, message: errorMessage } = res;
        if (code === 200) {
          setArticleList(records);
        } else {
          message.error(errorMessage);
        }
      },
    },
  );

  useEffect(() => {
    if (searchStrM) {
      findArticleListByTitleEsRun({
        articleTitle: searchStrM,
      });
    }
  }, [searchStrM]);

  const tabsChange = () => {};

  const articleRender = () => {
    return (
      <>
        <div className={styles.conditions}>
          <Radio.Group defaultValue="all" buttonStyle="outline">
            <Radio.Button value="all">综合</Radio.Button>
            <Radio.Button value="new">最新</Radio.Button>
            <Radio.Button value="hot">热门</Radio.Button>
          </Radio.Group>
          <div className={styles.totalTxt}>相关结果约22222个</div>
        </div>
        <div className={styles.articleWrapper}>
          <div className={commonStyles.articleListRow}>
            <Skeleton active loading={searchLoading} />
            <Skeleton active loading={searchLoading} />
            <Skeleton active loading={searchLoading}>
              <ArticleItem listData={articleList} />
            </Skeleton>
          </div>
        </div>
      </>
    );
  };
  return (
    <div className={styles.searchWrapper}>
      <div className={styles.left}>
        <div className={styles.tags}>
          <Tabs
            defaultActiveKey="1"
            onChange={tabsChange}
            items={[
              {
                label: `全部`,
                key: '1',
                children: articleRender(),
              },
              {
                label: `用户`,
                key: '2',
                children: `Content of Tab Pane 2`,
              },
              {
                label: `博客`,
                key: '3',
                children: `Content of Tab Pane 3`,
              },
            ]}
          />
        </div>
      </div>
      <div className={styles.right}>
        <div className={styles.concordanceWrapper}>
          <div className={styles.title}>相关搜索</div>
          <div className={styles.historySearchList}>
            <Tag className={styles.item}>c++</Tag>
            <Tag className={styles.item}>web</Tag>
            <Tag className={styles.item}>react</Tag>
            <Tag className={styles.item}>vue</Tag>
            <Tag className={styles.item}>前端</Tag>
            <Tag className={styles.item}>前端</Tag>
            <Tag className={styles.item}>前端</Tag>
            <Tag className={styles.item}>前端</Tag>
            <Tag className={styles.item}>linux的环境变量配置手册</Tag>
            <Tag className={styles.item}>前端</Tag>
          </div>
        </div>
        <div className={styles.rankingListWrapper}>
          <div className={styles.title}>java热搜榜</div>
          <div className={styles.rankingList}>
            <div className={styles.item}>
              <div className={styles.serialNumber}>1</div>java面试题
            </div>
            <div className={styles.item}>
              <div className={styles.serialNumber}>2</div>java面试题
            </div>
            <div className={styles.item}>
              <div className={styles.serialNumber}>3</div>java面试题
            </div>
            <div className={styles.item}>
              <div className={styles.serialNumber}>4</div>java面试题
            </div>
            <div className={styles.item}>
              <div className={styles.serialNumber}>5</div>java面试题
            </div>
            <div className={styles.item}>
              <div className={styles.serialNumber}>6</div>java面试题
            </div>
            <div className={styles.item}>
              <div className={styles.serialNumber}>7</div>java面试题
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
export default Index;
